<template>
	<view class="content" v-if="show==1">
		  <view class="goods" @click="gurl">
		    <view class="goods_1">
				<image class="lsimg" :src="order.avatar" mode="aspectFit"></image>
		      <view class="title">
		        <view class="biao">{{order.cate}}</view>
		        <view class="biao2">{{order.tid}}-{{order.laoshi}}</view>
				<view class="biao2">{{order.nianji}}</view>
				<view class="biao2">{{order.fuwu_cate}}</view>
		      </view>
		      <view class="amount">
				  <image src="../../static/images/right_2.png" mode="aspectFit"></image>
			  </view>
		    </view>
			<!--<view class="dizhi">
				<image class="dizhi2" src="../../static/images/map3.png" mode="aspectFill"></image>
				{{order.address}}
			</view>-->
			<view class="dizhi">
				<view class="dizhi3" style="width:30%;">实付:<text style="color:red;">{{zdtype==1?'㉿':'￥'}}{{order.pay_total}}</text></view>
				<view class="dizhi3" style="width:20%;text-align: center;">数量:{{order.amount}}个</view>
				<view class="dizhi3" style="width:50%;text-align: right;">上门日期:{{order.sktime}}</view>
			</view>
		  </view>
		
		  <view class="fenge"></view>
		
		  <view class="detail">
		    <view class="detail_1">
		      <text class="ti">订单编号：</text>
		      
		      <view class="fuzhi" @click="fuzhi">复制</view>
		      <text class="xuan">{{order.id}}</text>
		      
		    </view>
			<view class="detail_1">
			  <text class="ti">总金额：</text>
			  
			  <text class="xuan">{{zdtype==1?'㉿':'￥'}}{{order.total}}</text>
			</view>
			<view class="detail_1" >
			  <text class="ti">优惠券抵扣：</text>
			  
			  <text class="xuan">-{{order.yhq_total}}</text>
			</view>
		    <view class="detail_1">
		      <text class="ti">实付金额：</text>
		      
		      <text class="xuan">{{zdtype==1?'㉿':'￥'}}{{order.pay_total}}</text>
		    </view>
		
		    <view class="detail_1" v-if="order.status>1">
		      <text class="ti">支付方式：</text>
		      
		      <text class="xuan">
				  <template v-if="order.paytype==1">微信支付</template>
				  <template v-if="order.paytype==2">支付宝支付</template>
				  <template v-if="order.paytype==3">课券支付</template>
			  </text>
		    </view>
			<view class="detail_1">
			  <text class="ti">联系人：</text>
			  
			  <text class="xuan">{{order.name}}</text>
			</view>
			<!--<view class="detail_1">
			  <text class="ti">联系电话：</text>
			  
			  <text class="xuan">{{order.mobile}}</text>
			</view>-->
			<view class="detail_1" style="height:auto;">
			  <text class="ti" style="line-height: 24px;">订单地址：</text>
			  <view class="yonghu" @click="map(1)">
				<view class="yonghu2">用户：</view>
				<image src="../../static/images/map3.png" mode="aspectFill"></image>
				<text class="xuan" style="color:#333;">{{order.weizhi}} {{order.address}}</text>
			  </view>
			  <view class="yonghu" @click="map(2)">
				<view class="yonghu2">师傅：</view>
				<image src="../../static/images/map3.png" mode="aspectFill"></image>
				<text class="xuan" style="color:#333;">{{order.laoshi_address}}</text>
			  </view>
			</view>
		
		  </view>
		
		  <view class="fenge"></view>
		
		  <view class="detail" style="margin-bottom:80px;">
		    <view class="detail_1">
		      <text class="ti">下单时间：</text>
		      
		      <text class="xuan">{{order.createtime}}</text>
		    </view>
		    <view class="detail_1" v-if="order.status>1">
		      <text class="ti">支付时间：</text>
		      
		      <text class="xuan">{{order.paytime}}</text>
		    </view>
			<view class="detail_1" v-if="order.status>2">
			  <text class="ti">确认服务时间：</text>
			  
			  <text class="xuan">{{order.ysktime}}</text>
			</view>
			<view class="detail_1" v-if="order.status>3">
			  <text class="ti">订单完成时间：</text>
			  
			  <text class="xuan">{{order.wctime}}</text>
			</view>
			<view class="detail_1" v-if="order.status>4">
			  <text class="ti">评价时间：</text>
			  
			  <text class="xuan">{{order.pltime}}</text>
			</view>
			<view class="detail_1" style="height:auto;" v-if="order.status>4 && order.plcontent">
			  <text class="ti" style="line-height: 24px;">评价内容：</text>
			  <text class="xuan" style="line-height: 24px;margin-bottom: 5px;width: 100%;">{{order.plcontent}}</text>
			</view>
			
			<view class="detail_1" v-if="order.tk_status==2">
			  <text class="ti">退款金额：</text>
			  
			  <text class="xuan">￥{{order.tk_money}}</text>
			</view>
		  </view>
	</view>
</template>

<script>
	var app=getApp();
	import { setClipboardData, getClipboardData } from '@/uni_modules/u-clipboard/js_sdk'
	export default {
		data() {
			return {
				id:0,
				uid:0,
				zdtype:0,
				show:0,
				order:[]
			}
		},
		onLoad(op) {
			const uid = uni.getStorageSync('uid');
			if(app.isBlank(uid)==true){
				app.error_msg("请先登录");
			}
			if(app.isBlank(op.id)==true){
				app.error_msg("缺少参数");
			}
			var that=this;
			//#ifdef APP-PLUS
			uni.getSystemInfo({
			    success: function (res) {
					if(res.platform=='ios'){
						//that.zdtype=1;
					}
			    }
			});
			//#endif
			this.id=op.id;
			this.uid=uid;
			this.getdata();
		},
		methods: {
			getdata(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				uni.request({
				    url: app.globalData.url+"order/order_detail",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,uid:that.uid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						that.order=res.data.data.order
						that.show=1;
				    }
				});
			},
			map(t){
				var that=this;
				if(t==1){
					var lng=that.order.lng;
					var lat=that.order.lat;
					var add=that.order.weizhi;
				}else{
					var lng=that.order.laoshi_lng;
					var lat=that.order.laoshi_lat;
					var add=that.order.laoshi_address;
				}
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					address:add,
					success: function () {
						console.log('success');
					}
				});
			},
			fuzhi(){
				setClipboardData(this.order.id);
				
				uni.showToast({
				    title: '复制成功！',
				    duration: 1000
				});
				
			},
			gurl(){
				uni.navigateTo({
				    url: '/pages/goods/detail?id='+this.order.gid
				});
			}
		}
	}
</script>

<style>
	.yonghu2{display: inline-block;line-height: 30px;font-size: 0.8rem;}
	.yonghu text{display: block;width:100%;height:30px;line-height: 30px;color:#999;overflow: hidden;flex:1;}
	.yonghu image{width:15px;height:15px;margin-top: 8px;}
	.yonghu{width:100%;height:30px;display: flex;}
	.dizhi3{width:50%;height:25px;line-height: 25px;overflow: hidden;float: left;font-size: 0.8rem;color:#666;}
	.dizhi2{width:15px;height:15px;margin-top: 5px;float: left;}
	.dizhi{width:94%;height:25px;line-height: 25px;overflow: hidden;padding: 0px 3%;}
	.lsimg{width:100px;height:100px;margin-right: 5px;border-radius: 5px;}
	.top{width:94%;height:50px;background-color: #46C706;overflow: hidden;padding: 10px 3%;position: relative;}
	.top_1{width:50px;float: left;}
	.top_1 image{width:50px;}
	.top_2{float: left;margin-left: 60px;position: absolute;}
	.zhuangtai{width:100%;height: 30px;line-height: 30px;color:#fff;font-size: 1rem;overflow: hidden;}
	.shijian{width:100%;height: 20px;line-height: 20px;color:#eee;}
	
	.jindu{width:100%;padding: 10px 0px;}
	.jindu_1{width:100%;overflow: hidden;}
	.zi{width:20%;text-align: center;height:20px;line-height: 20px;color:#666;float: left;}
	.on{color:#f36!important;}
	.jindu_2{width:100%;overflow: hidden;}
	.zi2{width:20%;text-align: center;height:20px;line-height: 20px;color:#999;float: left;overflow: hidden;}
	.zi2_1{width:35%;height:20px;float: left;}
	.zi2_2{width:30%;height:20px;float: left;line-height: 20px;text-align: center;font-size:0.6rem;}
	.zi2_3{width:35%;height:20px;float: left;}
	.xian{width:100%;height:1px;background-color: #999;margin-top: 9.5px;}
	.active{color:#f36!important;font-size: 0.8rem!important;}
	
	.address{width:94%;padding: 10px 3%;}
	.name{width:100%;height:22px;color:#666;line-height: 22px;}
	.name text{margin-left: 10px;}
	.addr{width:100%;line-height: 22px;color:#999;}
	.addr_img{width:100%;}
	.fenge{width:100%;height:5px;background-color: rgb(245, 245, 245);}
	
	.goods{width:100%;padding-bottom: 10px;}
	.count{width:94%;padding:0px 3%;height:40px;line-height: 40px;color:#666;border-bottom: 1px rgb(245, 245, 245) solid;}
	.goods_1{width:94%;padding: 0px 3%;overflow: hidden;margin-top: 10px;display: flex;}
	.img{width:100px;height: 67px;margin-right: 8px;}
	.img image{width:100px;border-radius: 5px;height:67px;}
	.title{width:100%;flex: 1;}
	.biao{width:100%;height:25px;line-height: 25px;color:#333;overflow: hidden;font-size: 0.95rem;font-weight: 550;}
	.biao2{width:100%;height:25px;line-height: 25px;color:#666;overflow: hidden;}
	.guige{width:100%;height:17px;line-height: 17px;color:#999;font-size: 0.7rem;overflow: hidden;}
	.price{width:100%;height:20px;line-height: 20px;color:#f36;}
	.amount{width:40px;height:67px;}
	.amount image{width:30px;height:30px;margin-top: 18.5px;float: right;}
	
	.detail{width:100%;}
	.detail_1{width:94%;padding: 0px 3%;height:40px;border-bottom: 1px rgb(245, 245, 245) solid;overflow: hidden;}
	.ti{color:#333;line-height: 40px;float: left;}
	.xuan{color:#999;line-height: 40px;float: right;}
	
	.bottom{width:94%;padding:0px 3%;height:45px;position: fixed;bottom: 0px;border-top:1px #eee solid;background-color: #fff;z-index: 9999;}
	.pay{width:80px;height:32px;line-height: 30px;margin-top:7px;border-radius:20px;text-align: center;background-color: #f36;color:#fff;float: right;margin-left: 10px;}
	.quxiao{width:80px;height:28px;line-height: 28px;margin-top:7px;border-radius:20px;text-align: center;color:#999;float: right;border:1px #999 solid;}
	.money{width:40%;height:45px;line-height: 45px;color:#666;float: left;font-size:0.9rem;}
	
	.fuzhi{width:35px;height:22px;line-height: 22px;text-align: center;border:1px #ccc solid;color:#ccc;margin-top: 9px;float: right;margin-left: 7px;font-size: 0.7rem;border-radius: 3px;}
</style>
